<template>
	<div id="login" @keydown="enter($event)">
		<div class="loginLeft">
			<div class="logo">		
				<img src="../../assets/image/logo.png" style="height:21px;widht:114px; float: left; margin-left:10px; top: 35px; position: absolute;" /><H4 style="font-size: 24px;left: 146px; top: 25px;  position: absolute; color: white;">中压开关设备绝缘型式试验智能化控制系统</H4>
			</div>
			<div class="content">
				<!-- <mu-text-field v-model="username" label="工号" underline-color="primary" color="primary"></mu-text-field><br/> -->
				<!-- <mu-text-field v-model="password" label="密码" underline-color="primary" type="password" color="primary"></mu-text-field><br/> -->
				<!-- <mu-checkbox v-model="remember" :label="'记住密码'" :ripple="false"></mu-checkbox><br/> -->
				<!-- <el-button type="primary" @click="login($event)" :replace="true" :loading="flag">{{buttonText}}</el-button> -->
				<!-- <el-row :gutter="40"> -->
					<!-- <el-col :span="12" class="registerButton"><el-button type="text" @click="toRegister">用户注册</el-button></el-col> -->
					<!-- <el-col :span="12" class="registerButton"><el-button type="text" @click="forgetPassword">忘记密码</el-button></el-col> -->
				<!-- </el-row> -->
				<img src="../../assets/image/logo2.png" alt="" style="width: 80%; margin: 20px 0; padding-left: 15px;">
				<el-input prefix-icon="iconfont icon-denglu" placeholder="请输入工号" v-model="username" style="width: 90%; margin-bottom: 20px;" clearable></el-input>
				<el-input prefix-icon="iconfont icon-mima" placeholder="请输入密码" v-model="password" show-password style="width: 90%" clearable></el-input>
				<el-button type="primary" @click="login($event)" :replace="true" :loading="flag" style="width: 90%;margin-bottom: 20px;">{{buttonText}}</el-button><br/>
				<el-checkbox v-model="remember" :label="'记住登录状态'" :ripple="false" style="margin-bottom: 20px; color: white"></el-checkbox><br/>
			</div>
			<div class="copy gray-font">
				版权所有©2018纳米软件<br> Copyright©2017.All Rights Reserved. &nbsp;&nbsp;
			</div>
		</div>
		<!-- <div class="loginRight pull-right">
			<img src="../../assets/image/login_img.png" />
		</div> -->
	</div>
</template>
<script>
export default {
	name: 'Login',
	data() {
		return {
			username: '',
			password: '',
			remember: true,
			buttonText: '登  录',
			flag: false  // 判断是否为正在登陆状态
		};
	},
	methods: {
		async login() {
			if (this.username !== '' && this.password !== '') {
					let user = {};
					this.buttonText = '登录中';
					this.flag = true;
					user.username = this.username;
					user.password = this.password;
					const res = await this.$http.post('/login', user).catch(err=>err);
					/* 
						手动添加一个角色id 后期更改					
					*/
					// res.result.role_id = 36;
					// res.result.role_id = [49, 47];
					// console.log(res);
					if (res.code !== 200) {
						this.flag = false;
						this.buttonText = '登  录';
					} else {
						// this.loading.close();
						sessionStorage.setItem('userInfo', JSON.stringify(res.result));
						if (this.remember) {
							localStorage.setItem('rememberUser', true);
							localStorage.setItem('authorize', JSON.stringify(user));
						} else {
							localStorage.setItem('rememberUser', false);
							localStorage.removeItem('authorize');
						}
						this.$router.replace({ path: 'HomePage' });
					}
			} else {
				this.$toast.error('请输入账号密码');
			}
		},
		enter(ev) {
			//回车事件
			if (ev.keyCode === 13) {
				this.login();
			}
		},
		//  toRegister(){	//用户注册
		// 	this.$router.push({
		// 		path:'/UserRegister'
		// 	});
		// },
		// forgetPassword(){		//忘记密码
		// 	this.$router.push({
		// 		path:'/ForgetPassword'
		// 	});
		// }
	},
	mounted() {
		if (localStorage.getItem('rememberUser') === 'true') {
			//根据localStorage中rememberUser判断记住我的状态，如果为true则自动填写之前保存的账号密码
			this.remember = true;
			if (localStorage.getItem('authorize')) {
				let user = JSON.parse(localStorage.getItem('authorize'));
				this.username = user.username;
				this.password = user.password;
			}
		} else {
			this.remember = false;
		}
		if (sessionStorage.getItem('userInfo')) {
			sessionStorage.removeItem('userInfo');
		}
	}
};
</script>
<style lang="scss">
@import "../../assets/css/common.scss";
@import "../../public/fonts/iconfont.css";
@import "Login.scss";
</style>
